<template>
    <div class="calendar-list">
        <div class="list-header">
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
            <span>日</span>
        </div>
        <div class="list-body">
            <span v-for="(item,index) in list" :key="index" :class="styleObj(item)" @click="handleClick(item)">
            {{ item.day }}
            </span>
        </div>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useCalendarStore } from '@/stores/calendar';
import { computed } from 'vue';
const{currentYear, currentMonth,currentDate1,list} = storeToRefs(useCalendarStore());
const {lastMonth,nextMonth} = useCalendarStore();
const styleObj = computed(() => {
    return (item) =>{
        return {
        off: item.type !== 'this',
        active: item.type === 'this' && item.day === currentDate1.value,
    }
}
})
const handleClick = (item) => {
    if(item.type === 'last'){
        lastMonth()
    }else if(item.type === 'next'){
        nextMonth()
    }
    currentDate1.value = item.day;
}
</script>

<style lang="scss" scoped>
.calendar-list {
    margin-top: -20px;
    padding: 20px;
    border-radius: 16px;
    // height: 440px;
    background-color: #fff;

    .list-header {
        display: flex;
        gap: 20px;

        span {
            flex: 1;
            padding: 10px 0;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            color: #333;

            &:nth-child(7n),
            &:nth-child(7n+6) {
                color: red;
            }
        }
    }

    .list-body {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 20px;
        height: 400px;
        span {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            border-radius: 12px;

            &:hover {
                background-color: #eef0fd;
                cursor: pointer;
            }

            &.off {
                color: #898787;
                cursor: pointer;
                opacity: 0.5;
            }

            &.active {
                background-color: #4e6ef2;
                color: #fff;
            }
            &:nth-child(7n),
            &:nth-child(7n+6) {
                color: red;
            }
        }

    }
}
</style>